<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城-购物车</title>
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/base_header_index.css">
    <link rel="stylesheet" href="css/base_footer.css">
    <link rel="stylesheet" href="css/cart.css">
</head>

<body>
    <!-- 顶部菜单栏 -->
    <header>
        <!-- 顶部通栏 -->
        <div class="top">
            <!-- 版心 -->
            <div class="w1200">
                <!-- 左边url -->
                <span class="fl">乐购&emsp;legochina.cn</span>
                <!-- 右边欢迎语 -->
                <div class="welcome fr">欢迎光临乐购&emsp;请<a href="login.html">登陆</a>|<a href="register.html">注册</a>
                </div>
            </div>
        </div>
        <!-- 导航菜单栏 -->
        <div class="w1200 nav rel">
            <!-- logo -->
            <h1 class="logo abs">
                <a href="index.html">乐购</a>
            </h1>
            <!-- 搜索框和购物车按钮 -->
            <div class="search-buy fl">
                <!-- 搜索框 -->
                <div class="search-box fl">
                    <input class="search-cont" type="text" placeholder="请输入搜索的商品名">
                    <button class="search-btn fr"></button>
                </div>
                <!-- 购物车和订单 -->
                <div class="buy fr">
                    <div class="buy-box fl"><a href="cart.html">购物车</a></div>
                    <div class="buy-order fl"><a href="pay.html">我的订单</a></div>
                </div>
            </div>
            <!-- 导航栏 -->
            <nav class="fl">
                <ul class="fl">
                    <li><a href="sale.html">图书</a></li>
                    <li><a href="sale.html">电子书</a></li>
                    <li><a href="sale.html">原创文学</a></li>
                    <li><a href="sale.html">服装</a></li>
                    <li><a href="sale.html">户外运动</a></li>
                    <li><a href="sale.html">孕婴童</a></li>
                    <li><a href="sale.html">家居</a></li>
                    <li><a href="sale.html">创意文具</a></li>
                    <li><a href="sale.html">地方特产</a></li>
                    <li><a href="sale.html">海外购</a></li>
                    <li><a href="sale.html">电器城</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 购物车主体 -->
    <main class="w1200">
        <div class="cart-box">
            <!-- 购物车统计栏 -->
            <div class="cart-label clearfix">
                <h2>全部商品&nbsp;<span class="product-all">5</span></h2>
                <h2>活动商品&nbsp;<span>0</span></h2>
                <h2>库存紧张&nbsp;<span>0</span></h2>
                <a href="login.html">立即登录</a>
                <p><strong>温馨提示：</strong>亲爱的顾客, 您还没有登录, 所有商品价格, 活动信息以登录后显示为准</p>
            </div>
            <!-- 购物车商品 -->
            <div class="cart-product">
                <table>
                    <!-- 购物车商品-所有 -->
                    <thead>
                        <tr>
                            <th colspan="4" class="product-all">
                                <input class="check-all" type="checkbox">
                                <span>全选 删除 分享 收藏</span>
                            </th>
                            <th>
                                合计价格
                                <span class="totalprice">0.00</span>
                            </th>
                            <th>
                                已选商品
                                <span class="total">0</span>
                            </th>
                            <th>
                                <a class="goToPay" href="pay.html">去结算</a>
                            </th>
                        </tr>
                    </thead>

                    <!-- 购物车商品-具体 -->
                    <tbody>
                        <!-- 购物车商品-具体-店铺 -->
                        <tr class="cart-shop cart-shop1">
                            <th colspan="7">
                                <input class="check-shop check-shop1" type="checkbox">木果果木官方旗舰店
                            </th>
                        </tr>
                        <!-- 购物车商品-具体-同款 -->
                        <tr class="cart-commodity">
                            <!-- 购物车商品-具体-同款-选择框 -->
                            <td class="cart-choose">
                                <input class="single-check" type="checkbox">
                            </td>
                            <!-- 购物车商品-具体-同款-图片 -->
                            <td class="cart-pic">
                                <img src="images/cart/cart_bought.jpg">
                            </td>
                            <!-- 购物车商品-具体-同款-描述 -->
                            <td class="cart-text">
                                <p>秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                                <span>新品</span>
                                <span>包邮</span>
                            </td>
                            <!-- 购物车商品-具体-同款-颜色尺寸 -->
                            <td class="cart-color">
                                颜色：魅夜黑<br>
                                尺寸：M
                            </td>
                            <!-- 购物车商品-具体-同款-单价 -->
                            <td class="cart-price">
                                <p>169.00</p>
                                <span>
                                    <i>vip积分</i>
                                    100
                                </span>
                            </td>
                            <!-- 购物车商品-具体-同款-数量 -->
                            <td class="cart-count">
                                <button class="minus">-</button>
                                <input type="text" value="1" class="num">
                                <button class="add">+</button>
                                <span class="sum"></span>
                            </td>
                            <!-- 购物车商品-具体-同款-操作 -->
                            <td>
                                移入收藏夹<br>
                                删除<br>
                                分享<br>
                                相似宝贝
                            </td>
                        </tr>
                        <!-- 购物车商品-具体-同款2 -->
                        <tr class="cart-commodity">
                            <!-- 购物车商品-具体-同款-选择框 -->
                            <td class="cart-choose">
                                <input class="single-check" type="checkbox">
                            </td>
                            <!-- 购物车商品-具体-同款-图片 -->
                            <td class="cart-pic">
                                <img src="images/cart/cart_bought.jpg">
                            </td>
                            <!-- 购物车商品-具体-同款-描述 -->
                            <td class="cart-text">
                                <p>秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                                <span>新品</span>
                                <span>包邮</span>
                            </td>
                            <!-- 购物车商品-具体-同款-颜色尺寸 -->
                            <td class="cart-color">
                                颜色：魅夜黑<br>
                                尺寸：M
                            </td>
                            <!-- 购物车商品-具体-同款-单价 -->
                            <td class="cart-price">
                                <p>169.00</p>
                                <span>
                                    <i>vip积分</i>
                                    100
                                </span>
                            </td>
                            <!-- 购物车商品-具体-同款-数量 -->
                            <td class="cart-count">
                                <button class="minus">-</button>
                                <input type="text" value="1" class="num">
                                <button class="add">+</button>
                                <span class="sum"></span>
                            </td>
                            <!-- 购物车商品-具体-同款-操作 -->
                            <td>
                                移入收藏夹<br>
                                删除<br>
                                分享<br>
                                相似宝贝
                            </td>
                        </tr>
                    </tbody>

                    <!-- 购物车商品-具体2 -->
                    <tbody>
                        <!-- 购物车商品-具体-店铺2 -->
                        <tr class="cart-shop cart-shop2">
                            <th colspan="7">
                                <input class="check-shop check-shop2" type="checkbox">果果木木官方旗舰店
                            </th>
                        </tr>
                        <!-- 购物车商品-具体-同款 -->
                        <tr class="cart-commodity">
                            <!-- 购物车商品-具体-同款-选择框 -->
                            <td class="cart-choose">
                                <input class="single-check" type="checkbox">
                            </td>
                            <!-- 购物车商品-具体-同款-图片 -->
                            <td class="cart-pic">
                                <img src="images/cart/cart_bought.jpg">
                            </td>
                            <!-- 购物车商品-具体-同款-描述 -->
                            <td class="cart-text">
                                <p>秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                                <span>新品</span>
                                <span>包邮</span>
                            </td>
                            <!-- 购物车商品-具体-同款-颜色尺寸 -->
                            <td class="cart-color">
                                颜色：魅夜黑<br>
                                尺寸：M
                            </td>
                            <!-- 购物车商品-具体-同款-单价 -->
                            <td class="cart-price">
                                <p>169.00</p>
                                <span>
                                    <i>vip积分</i>
                                    100
                                </span>
                            </td>
                            <!-- 购物车商品-具体-同款-数量 -->
                            <td class="cart-count">
                                <button class="minus">-</button>
                                <input type="text" value="1" class="num">
                                <button class="add">+</button>
                                <span class="sum"></span>
                            </td>
                            <!-- 购物车商品-具体-同款-操作 -->
                            <td>
                                移入收藏夹<br>
                                删除<br>
                                分享<br>
                                相似宝贝
                            </td>
                        </tr>
                        <!-- 购物车商品-具体-同款2 -->
                        <tr class="cart-commodity">
                            <!-- 购物车商品-具体-同款-选择框 -->
                            <td class="cart-choose">
                                <input class="single-check" type="checkbox">
                            </td>
                            <!-- 购物车商品-具体-同款-图片 -->
                            <td class="cart-pic">
                                <img src="images/cart/cart_bought.jpg">
                            </td>
                            <!-- 购物车商品-具体-同款-描述 -->
                            <td class="cart-text">
                                <p>秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                                <span>新品</span>
                                <span>包邮</span>
                            </td>
                            <!-- 购物车商品-具体-同款-颜色尺寸 -->
                            <td class="cart-color">
                                颜色：魅夜黑<br>
                                尺寸：M
                            </td>
                            <!-- 购物车商品-具体-同款-单价 -->
                            <td class="cart-price">
                                <p>169.00</p>
                                <span>
                                    <i>vip积分</i>
                                    100
                                </span>
                            </td>
                            <!-- 购物车商品-具体-同款-数量 -->
                            <td class="cart-count">
                                <button class="minus">-</button>
                                <input type="text" value="1" class="num">
                                <button class="add">+</button>
                                <span class="sum"></span>
                            </td>
                            <!-- 购物车商品-具体-同款-操作 -->
                            <td>
                                移入收藏夹<br>
                                删除<br>
                                分享<br>
                                相似宝贝
                            </td>
                        </tr>
                        <!-- 购物车商品-具体-同款3 -->
                        <tr class="cart-commodity">
                            <!-- 购物车商品-具体-同款-选择框 -->
                            <td class="cart-choose">
                                <input class="single-check" type="checkbox">
                            </td>
                            <!-- 购物车商品-具体-同款-图片 -->
                            <td class="cart-pic">
                                <img src="images/cart/cart_bought.jpg">
                            </td>
                            <!-- 购物车商品-具体-同款-描述 -->
                            <td class="cart-text">
                                <p>秋装新品韩范简约宽松中长款纯棉长袖衬衫</p>
                                <span>新品</span>
                                <span>包邮</span>
                            </td>
                            <!-- 购物车商品-具体-同款-颜色尺寸 -->
                            <td class="cart-color">
                                颜色：魅夜黑<br>
                                尺寸：M
                            </td>
                            <!-- 购物车商品-具体-同款-单价 -->
                            <td class="cart-price">
                                <p>169.00</p>
                                <span>
                                    <i>vip积分</i>
                                    100
                                </span>
                            </td>
                            <!-- 购物车商品-具体-同款-数量 -->
                            <td class="cart-count">
                                <button class="minus">-</button>
                                <input type="text" value="1" class="num">
                                <button class="add">+</button>
                                <span class="sum"></span>
                            </td>
                            <!-- 购物车商品-具体-同款-操作 -->
                            <td>
                                移入收藏夹<br>
                                删除<br>
                                分享<br>
                                相似宝贝
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            <!-- 猜你喜欢 -->
            <div class="guess-like">
                <h2>猜你喜欢<span class="guess-change fr">换一批</span></h2>
                <!-- 猜你喜欢-图片 -->
                <div class="guess-like-pics">
                    <div class="guess-like-pic">
                        <!-- 猜你喜欢-图片-第一批 -->
                        <ul>
                            <li>
                                <div class="guess-like-pic-radius">
                                    <img src="images/cart/cart_guess_1.jpg">
                                </div>
                                <p>AIVEI秋新中长款牛仔外套</p>
                                <span>￥ 79.00</span>
                            </li>
                            <script>
                                for (let i = 0; i < 5; i++) {
                                    document.write(`
                                    <li>
                                        <div class="guess-like-pic-radius">
                                            <img src="images/cart/cart_guess_1.jpg">
                                        </div>
                                        <p>AIVEI秋新中长款牛仔外套</p>
                                        <span>￥ 79.00</span>
                                    </li>
                                    `)
                                }
                            </script>
                        </ul>
                        <!-- 猜你喜欢-图片-第二批 -->
                        <ul>
                            <li>
                                <div class="guess-like-pic-radius">
                                    <img src="images/cart/cart_guess_2.jpg">
                                </div>
                                <p>女装夏季裙子新款品牌</p>
                                <span>￥ 52.00</span>
                            </li>
                            <script>
                                for (let i = 0; i < 5; i++) {
                                    document.write(`
                                    <li>
                                        <div class="guess-like-pic-radius">
                                            <img src="images/cart/cart_guess_2.jpg">
                                        </div>
                                        <p>女装夏季裙子新款品牌</p>
                                        <span>￥ 52.00</span>
                                    </li>
                                    `)
                                }
                            </script>
                        </ul>
                        <!-- 猜你喜欢-图片-第三批 -->
                        <ul>
                            <li>
                                <div class="guess-like-pic-radius">
                                    <img src="images/cart/cart_guess_3.jpg">
                                </div>
                                <p>女性夏装首选服装类型</p>
                                <span>￥ 229.00</span>
                            </li>
                            <script>
                                for (let i = 0; i < 5; i++) {
                                    document.write(`
                                    <li>
                                        <div class="guess-like-pic-radius">
                                            <img src="images/cart/cart_guess_3.jpg">
                                        </div>
                                        <p>女性夏装首选服装类型</p>
                                        <span>￥ 229.00</span>
                                    </li>
                                    `)
                                }
                            </script>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部页脚 -->
    <footer>
        <!-- 底部链接 -->
        <div class="foot-up w1200">
            <div class="foot-up-box clearfix">
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic1.jpg">
                    <span>
                        正品保障<br>
                    </span>
                    <span>
                        赠品行货&emsp;放心选购
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic2.jpg">
                    <span>
                        满86包邮<br>
                    </span>
                    <span>
                        满86元&emsp;免运费
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic3.jpg">
                    <span>
                        售后无忧<br>
                    </span>
                    <span>
                        7天无理由退货
                    </span>
                </div>
                <div class="foot-up-inf fl">
                    <img src="images/footer/foot_up_pic4.jpg">
                    <span>
                        准时送达<br>
                    </span>
                    <span>
                        收货时间由你做主
                    </span>
                </div>
            </div>
            <!-- 链接部分 -->
            <div class="foot-up-link">
                <dl>
                    <dt>新手入门</dt>
                    <dd><a href="">购买流程</a></dd>
                    <dd><a href="">会员制度</a></dd>
                    <dd><a href="">订单查询</a></dd>
                    <dd><a href="">服务协议及隐私说明</a></dd>
                    <dd><a href="">网站地图</a></dd>
                </dl>
                <dl>
                    <dt>支付方式</dt>
                    <dd><a href="">货到付款</a></dd>
                    <dd><a href="">网上支付</a></dd>
                    <dd><a href="">礼品卡支付</a></dd>
                    <dd><a href="">其他支付</a></dd>
                </dl>
                <dl>
                    <dt>配送服务</dt>
                    <dd><a href="">配送进度查询</a></dd>
                    <dd><a href="">商品验货与签收</a></dd>
                </dl>
                <dl>
                    <dt>相关规则</dt>
                    <dd><a href="">平台规则</a></dd>
                    <dd><a href="">退换货政策</a></dd>
                    <dd><a href="">发票制度</a></dd>
                    <dd><a href="">帮助中心</a></dd>
                </dl>
                <dl>
                    <dt>App更优惠</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>
                <dl>
                    <dt>加微信查订单</dt>
                    <dd><img src="images/qc_code.png"></dd>
                </dl>

            </div>
        </div>
        <!-- 版权信息 -->
        <div class="foot-down">
            <div class="w1200">
                <span>
                    沪ICP备XXXXXXXXX号 | 经营证照 | 互联网药品信息服务资格证(沪)-经营性-2017-0006 | 违法和不良信息举报电话：XXX-XXXXXXXX | 沪B2-XXXXXXX
                    |
                </span>
                <span>
                    沪公网安备 XXXXXXXXX号 | 友情链接 | 出版物经营许可证 | 增值电信业务经营许可证
                </span>
                <div class="foot-down-pic">
                    举报图片
                    <img src="images/footer/foot_down_pic1.jpg">
                    <img src="images/footer/foot_down_pic2.jpg">
                    <img src="images/footer/foot_down_pic3.jpg">
                    <img src="images/footer/foot_down_pic4.jpg">
                    <img src="images/footer/foot_down_pic5.jpg">
                    <img src="images/footer/foot_down_pic6.jpg">
                </div>
            </div>
        </div>
    </footer>

    <!-- js -->
    <script src="lib/jquery.js"></script>
    <script src="js/common.js"></script>
    <script src="js/base.js"></script>
    <script src="js/cart.js"></script>
</body>

</html>